<template>
  <div class="app-container">

    <el-row :gutter="12">
      <el-col :span="5">
        <div class="tree" style="border-right: 1px solid #ccc">
          <el-tree
            class="filter-tree"
            :data="treeData"
            :props='{ children: "children", label: "title" }'
            ref="tree"
            @node-click="clickTree" 
          ></el-tree>
        </div>
      </el-col>

      <el-col :span="19">
        <orderReportItem :title="curData.title" v-show="curData.index==1"></orderReportItem>
        <orderReportDetailItem :title="curData.title" v-show="curData.index==2"></orderReportDetailItem>
        <esForGoods :title="curData.title" v-show="curData.index==3"></esForGoods>
        <redoOrderMq :title="curData.title" v-show="curData.index==4"></redoOrderMq>
        <redoLogMq :title="curData.title" v-show="curData.index==5"></redoLogMq>
      </el-col>

    </el-row>
  </div>
</template>

<script>
import apiRedoReportLog from "@/api/logManage/redoReportLog";

import orderReportItem from "./orderReport"
import orderReportDetailItem from "./orderDetailReport"
import esForGoods from "./esForGoods"
import redoLogMq from "./redoLogMq"
import redoOrderMq from "./redoOrderMq"

export default {
  name: "redoReportLog",
  components: { orderReportItem, esForGoods,orderReportDetailItem,redoLogMq,redoOrderMq },
  data() {
    return {
      curData:{},
      treeData:[]
    };
  },
  mounted(){
    this.treeData = apiRedoReportLog.getTitleList();
    this.curData = this.treeData[0]
  },
  methods: {
  	clickTree(data){
      this.curData = data
    }
  }
};
</script>

<style scoped>
</style>